<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>一级分类-me</title>
    <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css" />
    <link
      rel="stylesheet"
      href="./lib/bootstrap-validator/css/bootstrapValidator.min.css"
    />
    <link rel="stylesheet" href="./lib/nprogress/nprogress.css" />
    <!-- 公共的css文件 -->
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="" />
  </head>

  <body>
    <!-- 乐淘侧边栏部分 -->
    <div class="lt-aside">
      <!-- 标题 -->
      <a>我有一只小毛驴,我很开心呀</a>
      <h3 class="title">
        <a href="#">黑马34期</a>
      </h3>
      <!-- 头像 -->
      <div class="user">
        <img src="./images/default.png" alt="" />
        <p>超级管理员</p>
      </div>
      <!-- 导航 -->
      <ul class="nav clearfix">
        <li>
          <a href="user.html">
            <span class="glyphicon glyphicon-user"></span>
            用户管理666 用户管理雨雨雨雨雨雨
          </a>
        </li>
        <li>
          <a href="#">
            <span class="glyphicon glyphicon-th-list"></span>
            分类管理
          </a>
          <ul class="clearfix child" style="display: block">
            <li class="current"><a href="first.html">一级分类</a></li>
            <li><a href="second.html">二级分类</a></li>
          </ul>
        </li>
        <li>
          <a href="product.html">
            <span class="glyphicon glyphicon-tags"></span>
            商品管理
          </a>
        </li>
      </ul>
    </div>
    <!-- 乐淘主体部分 -->
    <div class="lt-main">
      <!-- 顶部条 -->
      <div class="topbar">
        <a
          href="#"
          class="glyphicon glyphicon-align-justify menu pull-left"
        ></a>
        <a
          href="#"
          class="glyphicon glyphicon-log-out login-out pull-right"
        ></a>
      </div>
      <!-- 下面部分 -->
      <div class="container-fluid">
        <!-- 路径部分 -->
        <ol class="breadcrumb lt-url">
          <li><a href="#">管理系统</a></li>
          <li><a href="#">分类管理</a></li>
          <li class="active">一级分类</li>
        </ol>
        <!-- 添加按钮 -->
        <!-- data-toggle="modal" data-target="#first-modal"控制模态框的显示与隐藏 -->
        <button
          class="btn-add btn btn-default"
          data-toggle="modal"
          data-target="#first-modal"
        >
          添加分类
        </button>
        <!-- 数据部分 -->
        <table class="table table-bordered table-hover mt-20">
          <thead>
            <tr>
              <th>序号</th>
              <th>一级分类名</th>
            </tr>
          </thead>
          <tbody>
            <!-- <tr>
                        <td> 1</td>
                        <td> 1</td>
                    </tr> -->
          </tbody>
        </table>
        <!-- 分页导航部分 -->
        <div class="pull-right">
          <ul class="pag-first"></ul>
        </div>
      </div>
    </div>

    <!-- 模态框 -->
    <div class="modal fade" tabindex="-1" id="first-modal">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">添加分类</h4>
          </div>
          <div class="modal-body">
            <form action="#" id="form">
              <div class="form-group">
                <input
                  type="text"
                  name="categoryName"
                  id="categoryName"
                  class="form-control"
                  placeholder="请输入一级分类"
                />
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              取消
            </button>
            <button type="submit" class="btn btn-primary add-cate" form="form">
              添加
            </button>
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
    <!-- 渲染一级分类模板 -->
    <script type="text/html" id="tmp-first">
      {{each rows v i}}
          <tr>
              <td>{{ i +1 + (page -1) * size }}</td>
              <td>{{v.categoryName}}</td>
          </tr>
      {{/each}}
    </script>

    <script src="./lib/jquery/jquery.min.js"></script>
    <script src="./lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="./lib/bootstrap-paginator/bootstrap-paginator.min.js"></script>
    <script src="./lib/bootstrap-validator/js/bootstrapValidator.min.js"></script>
    <!-- 进度条 -->
    <script src="./lib/nprogress/nprogress.js"></script>
    <!-- 模板引擎 -->
    <script src="./lib/artTemplate/template-web.js"></script>
    <!-- 判断用户有没有登录过的js文件 -->
    <script src="./js/islogin.js"></script>
    <!-- 公共的js文件 -->
    <script src="./js/common.js"></script>
    <!--  -->
    <script src="./js/first.js"></script>
  </body>
</html>
